<template>
  <section class="component order-information">
    <ul
      class="overflow-hidden"
      v-for="(item, index) in this.information"
      :key="index"
    >
      <li class="float-left">
        <span>订单编号：</span><span>{{ item.orderNo }}</span>
      </li>
      <li class="float-left">
        <span>订单类型：</span><span>{{ item.orderType | dictConvert("OrderType")}}</span>
      </li>
      <li class="float-left">
        <span>订单状态：</span><span>{{ item.orderStatus | dictConvert("OrderStatus") }}</span>
      </li>
      <li class="float-left">
        <span>贷款本金：</span><span>{{ item.loanCapital }}</span>
      </li>
      <li class="float-left">
        <span>放款日期：</span><span>{{ item.disbursementDate }}</span>
      </li>
      <li class="float-left">
        <span>贷款期数：</span><span>{{ item.loanPeriod }}</span>
      </li>
      <li class="float-left">
        <span>车牌号：</span><span>{{ item.carNo }}</span>
      </li>
      <li class="float-left">
        <span>品牌：</span><span>{{ item.brand }}</span>
      </li>
      <li class="float-left">
        <span>型号：</span><span>{{ item.modelNo }}</span>
      </li>
      <li class="float-left">
        <span>颜色：</span><span>{{ item.colour }}</span>
      </li>
      <li class="float-left">
        <span>是否新车：</span><span>{{ item.newCar }}</span>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { namespace } from "vuex-class";
import { FilterService } from "~/utils/filter.service";
import store from "~/store";
const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {},
})
export default class OrderInformation extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private information: any = [];
  private activated() {
    this.refreshData();
  }
  private refreshData() {
    this.caseOperatorPageService
      .queryCarLoanOrderInfo(this.caseId)
      .subscribe((data) => {
        this.information = data["carLoanOrders"];
        this.information.forEach((el) => {
          el.loanCapital = `${this.$filter.toThousands(el.loanCapital)}元`;
          el.disbursementDate = FilterService.dateFormat(el.disbursementDate);
        });
      });
  }
}
</script>
<style lang="less">
.component.order-information {
  padding: 0px 5px 0px 0px;
  .padding-bottom-8 {
    padding-bottom: 8px;
    .name {
      color: #606266;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      font-size: 12px;
      list-style: none;
      padding-bottom: 10px;
    }
  }
}
</style>
